<template>
  <a-form layout="inline" class="listSearchWrap table-page-search-wrapper">
    <a-row :gutter="[16, 8]">
      <a-col
        :xs="24"
        :sm="24"
        :md="8"
        :lg="4"
        :xl="4"
        :xxl="4"
      >
        <a-input
          v-model.trim="queryParams.vin"
          :placeholder="$t('pleaseInput') + 'VIN'"
          :maxLength="50"
          @keyup.enter="handleSearch"
        />
      </a-col>
      <a-col
        :xs="24"
        :sm="24"
        :md="8"
        :lg="6"
        :xl="6"
        :xxl="6">
        <car-model-select
          ref="selectModel"
          :defaultValue="queryParams.modelId"
          @changeoption="selectCarModel"
          @transSelecetdModelObj="recordModelName"
          @selectFirstTimeDone="handleModelSelectFirst"
          :hasAll="false"
          :clear="false"
          mode="default"
          style="width: 100%;"
          :selectFirstOption="true"
        />
      </a-col>
      <a-col
        :xs="24"
        :sm="24"
        :md="8"
        :lg="6"
        :xl="6"
        :xxl="6">
        <a-range-picker
          @change="onDayRangeChange"
          :value="defaultDateRange"
          :allow-clear="false"
          format="YYYY-MM-DD"
        />
      </a-col>
      <a-col
        :xs="24"
        :sm="24"
        :md="8"
        :lg="6"
        :xl="6"
        :xxl="6">
        <a-form-item class="searchBtns">
          <auth-button type="info" style="margin: 0 10px" :auth="statisticsPerms.flowDetail.view" @click="handleSearch">
            <i class="iconfont icon-chazhao"></i>
            {{ $t('inquiry') }}
          </auth-button>
          <a-button @click="clearCondition" style="margin-right: 10px">
            <i class="iconfont icon-qingkong"></i>
            {{ $t('clear') }}
          </a-button>
          <auth-button
            type="primary"
            :loading="exporting"
            :auth="statisticsPerms.flowDetail.export"
            @click="exportStatisticsTask"
          >
            <i class="iconfont icon-xiazai"></i>
            {{ $t('export') }}
          </auth-button>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>
<script>
// 引入state
import { mapState } from 'vuex'
// 引入时间处理工具库
import moment from 'moment'
// 引入权限按钮
import AuthButton from '@/components/AuthButton'
// 引入车型选择器
import CarModelSelect from '@/views/components/CarModelSelect'
// 引入统计权限
import { statisticsPerms } from '@/config/permission/index'
// 引入下载工具
import { downloadBlobFile } from '@/utils/functions'
export default {
  components: {
    AuthButton,
    CarModelSelect
  },
  computed: {
    // 查询参数
    ...mapState({
      queryParams: (state) => state.stasticsFlowRport.queryParams,
      actualQuery: (state) => state.stasticsFlowRport.actualQuery
    })
  },
  data () {
    return {
      statisticsPerms,
      exporting: false,
      defaultDateRange: [moment().subtract(30, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
      exportModelNameObj: {}
    }
  },
  methods: {
    // 默认选中车型完成
    handleModelSelectFirst () {
      this.handleSearch()
    },
    // 记录所选车型的属性，包括导出所需要的车型名称等
    recordModelName (val) {
      this.exportModelNameObj = val
    },
    // 导出
    exportStatisticsTask () {
      this.exporting = true
      this.$api.exportFlowReportExcel(this.actualQuery).then((res) => {
        // eslint-disable-next-line max-len
        downloadBlobFile(res, this.$t('llmx') + '[' + this.exportModelNameObj.title + '][' + this.exportModelNameObj.trimLevel + ']' + '.xlsx')
      }).finally(() => {
        this.exporting = false
      })
    },
    // 选择车型
    selectCarModel (val, val2) {
      this.queryParams.modelId = val
      // 车型被手动恢复到第一条之后，手动去请求数据
      if (val2) {
        this.handleSearch()
      }
    },
    // 查询搜索
    handleSearch () {
      this.$emit('searchTbData')
    },
    // 重置搜索条件
    clearCondition () {
      this.$store.commit('resetFlowReportQueryParams')
      this.$refs.selectModel.recoverToFirstOption()
      this.defaultDateRange = [moment().subtract(30, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
      // this.handleSearch()
    },
    // 选择切换日期范围
    onDayRangeChange (date, dateString) {
      if (date.length === 0) {
        this.queryParams.startTime = moment().subtract(1, 'months').format('YYYY-MM-DD')
        this.queryParams.endTime = moment().endOf('day').format('YYYY-MM-DD')
        return
      }
      const maxDays = 30
      if (date[1].diff(date[0], 'days') > maxDays) {
        this.$message.error(this.$t('dateRangeTip').replace('__DAYS__', maxDays))
        // eslint-disable-next-line consistent-return
        return false
      }
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.startTime = dateString[0]
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.endTime = dateString[1]
      this.defaultDateRange = dateString
    }
  }
}
</script>
